import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Spin, Calendar } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
import myStyle from './calendar.less';
import uuid from 'es6-uuid';
import { getMonthFirstDay } from '../../utils/utils';

class MyCalendar extends PureComponent {
  // props默认值
  static defaultProps = {
    onRef: () => {}, // 本组件的引用
    dateCellRender: () => {}, // 日历数据渲染的函数 具体使用参照antd里的日历组件
    onSelect: () => {}, // 左右箭头切换通知父组件
    date: undefined, // 当前显示年月
    child: undefined, // 顶部标签说明,html格式
    showButton: true, // 快捷切换按钮是否显示 默认显示
    loading: false, // 加载状态
  };

  state = {
    date: moment(), // 当前月份
  };

  componentDidMount() {
    this.props.onRef(this);
    this.id = `id${uuid(4)}`; // 日历的唯一ID,用来获取日历dom元素
    // 初始化
    setTimeout(() => {
      this.setState(
        // setState需要异步使用 在didmount里
        {
          date: this.props.date,
        },
        () => {
          this.showFiveRow();
        },
      );
    }, 0);
  }

  componentDidUpdate(preProps) {
    if (moment(preProps.date).format('YYYY-MM') !== moment(this.props.date).format('YYYY-MM')) {
      this.setState(
        {
          date: this.props.date,
        },
        () => {
          this.showFiveRow(); // 判断显示5行
        },
      );
    }
  }

  // 根据不同月份 调整展示5行
  showFiveRow = () => {
    const dom = document.querySelector(`#${this.id}`); // 获取元素dom
    if (dom) {
      const trList = dom.getElementsByTagName('tr');
      const firstRow = trList[1]; // 获取日历第一行tr的dom(周一到周日的标题页算一行)
      const lastRow = trList[trList.length - 1]; // 获取最后一行tr的dom
      // 选中月的第一天 是周六周日 第一行隐藏且最后一行显示,否则第一行显示且最后一行隐藏
      if (moment(`${moment(this.props.date).format('YYYY-MM')}-01`).format('d') === 0 || moment(`${moment(this.props.date).format('YYYY-MM')}-01`).format('d') === 6) {
        firstRow.style.display = 'none';
        lastRow.style.display = 'contents';
      } else {
        firstRow.style.display = 'contents';
        lastRow.style.display = 'none';
      }
    }
  };

  // 月份上下切换
  changeMonth = (type) => {
    if (type === 'pre') {
      // 抛出给父组件日期的变更
      // 获取跳转月份第一行第一天
      this.props.onSelect(getMonthFirstDay(moment(this.state.date).add(-1, 'months')));
    } else {
      this.props.onSelect(getMonthFirstDay(moment(this.state.date).add(1, 'months')));
    }
  };

  render() {
    const { loading } = this.props;
    return (
      <div id={this.id}>
        <Spin spinning={loading} tip='加载中...'>
          <div className={myStyle.dateFast}>
            <div style={{ display: this.props.child ? 'block' : 'none' }}>{this.props.child}</div>
            {this.props.showButton && (
              <div className={myStyle.fastClick}>
                <a
                  onClick={() => {
                    this.changeMonth('pre');
                  }}
                ></a>
                <span>{`${moment(this.props.date).format('YYYY年MM月')}`}</span>
                <a
                  onClick={() => {
                    this.changeMonth('next');
                  }}
                ></a>
              </div>
            )}
          </div>
          <Calendar
            dateCellRender={this.props.dateCellRender}
            className={myStyle.calendar}
            onSelect={(e) => {
              this.props.onSelect(e);
            }}
            value={moment(this.props.date)}
          />
        </Spin>
      </div>
    );
  }
}
// props说明
MyCalendar.propsTypes = {
  onRef: PropTypes.func, // 本组件的引用
  dateCellRender: PropTypes.func, // 日历数据渲染的函数 具体使用参照antd里的日历组件
  onSelect: PropTypes.func, // 左右箭头切换通知父组件
  date: PropTypes.object, // 当前显示年月
  child: PropTypes.object, // 加载顶部说明（可以是ReactNode）
  showButton: PropTypes.bool, // 是否显示快捷切换按钮
  loading: PropTypes.bool, // 加载状态
};
export default MyCalendar;
